.playground_wrapper {
   border-radius: 1.5rem;
   background-image: radial-gradient(
      var(--bg-content-dot) 0.8px,
      var(--bg-primary) 0.8px
   );
   background-size: 24px 24px;
   z-index: 100;

   height: 100%;
   width: 100%;
}

.playground {
   display: grid;
   grid-template-rows: 6.6rem auto;
   grid-column: 2 / -1;
   border-radius: 1.5rem;
   padding-top: 1.5rem;
   background: var(--bg-secondary);
   background-image: radial-gradient(
      var(--bg-content-dot) 0.8px,
      var(--bg-secondary) 0.8px
   );
   background-size: 24px 24px;
   box-shadow: var(--content-shadow);
   position: relative;
   height: 100%;

   @media (max-width: 825px) {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
      border-radius: 0;
   }

   @media (max-width: 370px) {
      padding-top: 0.2rem;
   }

   &_view {
      padding: 2rem;
      width: 100%;
      height: 100%;
      overflow: auto;
      position: relative;
   }
}
